<script lang="ts" setup>
import { useStyleStore } from '@/stores/style'
import { createOpacityColor } from '@/utils'

const styleStore = useStyleStore()
const color = ref<string>(
  styleStore.background.bgType === 'light'
    ? createOpacityColor(styleStore.background.bgLightColor, 0.8)
    : createOpacityColor(styleStore.background.bgDarkColor, 0.8)
)

watch(
  () => styleStore.background.bgType,
  () => {
    color.value =
      styleStore.background.bgType === 'light'
        ? createOpacityColor(styleStore.background.bgLightColor, 0.8)
        : createOpacityColor(styleStore.background.bgDarkColor, 0.8)
  }
)
</script>

<template>
  <div class="w-full h-28">
    <svg
      class="waves max-sm:hidden"
      preserveAspectRatio="none"
      shape-rendering="auto"
      viewBox="0 0 500 100"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <!-- 修改后的路径数据 -->
        <path
          id="gentle-wave"
          d="M-200 150
         C-100 80, -100 0, -50 0
         S 0 60, 50 60
         S 100 0, 150 0
         S 200 60, 250 60
         S 300 0, 350 0
         S 400 60, 450 60
         S 500 0, 550 0
         S 600 60, 650 60
         S 700 0, 750 0
         v100h-850z"
        />
      </defs>
      <g class="parallax">
        <use :fill="color" x="0" xlink:href="#gentle-wave" y="0" />
        <use :fill="color" x="0" xlink:href="#gentle-wave" y="5" />
        <use :fill="color" x="0" xlink:href="#gentle-wave" y="10" />
      </g>
    </svg>
    <svg
      class="waves sm:hidden"
      preserveAspectRatio="none"
      shape-rendering="auto"
      viewBox="0 0 240 100"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <!-- 修改后的路径数据 -->
        <path
          id="gentle-wave"
          d="M-200 150
         C-100 80, -100 0, -50 0
         S 0 60, 50 60
         S 100 0, 150 0
         S 200 60, 250 60
         S 300 0, 350 0
         S 400 60, 450 60
         S 500 0, 550 0
         S 600 60, 650 60
         S 700 0, 750 0
         v100h-850z"
        />
      </defs>
      <g class="parallax">
        <use :fill="color" x="0" xlink:href="#gentle-wave" y="0" />
        <use :fill="color" x="0" xlink:href="#gentle-wave" y="5" />
        <use :fill="color" x="0" xlink:href="#gentle-wave" y="10" />
      </g>
    </svg>
  </div>
</template>

<style lang="scss" scoped>
.waves {
  position: relative;
  width: 100%;
  height: 100%;
  /*Fix for safari gap*/
  margin-bottom: -7px;
  max-height: 150px;
}

@for $i from 1 through 4 {
  .parallax > use:nth-child(#{$i}) {
    animation-name: move;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.55, 0.5, 0.45, 0.5);
    animation-delay: -10s;
    animation-duration: calc(3s + $i * 5s);
    @extend .use-transitions-colors !optional;
  }
}

@keyframes move {
  0% {
    transform: translate3d(-190px, 0, 0);
  }
  100% {
    transform: translate3d(10px, 0, 0);
  }
}
</style>
